 <template>
    <div>
        <h1>显示页面</h1>
        当前登录人:<span>{{ user.userinfo }}</span>
        <table class="table table-bordered">
            <tbody>
                 <tr>
                    <td>房型名称</td>
                    <td>房型价格</td>
                    <td>房型状态</td>
                    <td>房型图片</td>
                    <td>操作</td>
                </tr>
                <tr v-for="i in data.list" :key="i.houseId">
                    <td>{{ i.houseType }}</td> 
                    <td>{{ i.housePrice }}</td>
                    <td>{{ i.state==1?'已入住':'未入住' }}</td>
                    <td><img :src="i.img" width="250" height="100"></td>
                    <td><input type="button"  class="btn btn-info" value="删除" @click="del(i.houseId) "></td>
                </tr>     
            </tbody>
           
        </table>
        <div>
            <span>共{{ data.totalcount }}条</span>
            <span>共{{ info.pageindex }}/{{ data.totalpage }}页</span>

            <input type="button" value="首页" @click="gochange(1) ">
            <input type="button" value="上一页" @click="gochange(info.pageindex-1) ">
            <input type="button" v-for="i in data.totalpage" :value="i" @click="gochange(i) ">
            <input type="button" value="下一页" @click="gochange(info.pageindex+1) ">   
            <input type="button" value="尾页" @click="gochange(data.totalpage) ">
            <input type="number" v-model="info.pageindex"><input type="button" value="跳转" @click="gochange(info.pageindex) ">
            <select v-model="info.pagesize" @change="show">
                <option v-for="i in arr" :value="i">每页{{ i }}条</option>
            </select>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { useStore } from "@/stores/user";
import axios from "axios";
import { ref,reactive,onMounted } from "vue";

const user = useStore();

let arr:any=([3,6,9,50])

let info:any = reactive({
    pageindex:1,
    pagesize:3
})

let data:any=reactive({
"totalpage": 0,
"totalcount": 0,
"list":[]
})

onMounted(()=>{
   
    show();
})


// const sizechange=()=>{
//     info.pagesize=
// }

const gochange=(num:any)=>{
    if(num<1){
        info.pageindex=1;
        return;
    }
     if(num>data.totalpage){
        info.pageindex=data.totalpage;
        return;
    }
    info.pageindex=num;
    show();
    return;
}

const del=(id:any)=>{
    let f =confirm("确认删除吗?");
    if(f)
    {
        axios({
            url:'http://localhost:5017/api/User/Del',
            method:"get",
            params:{id:id}
        })
        .then(res=>{
            console.log(res);
            if(res.data>0)
            {
                alert("删除成功");
                show();
                return;
            }
            else{
                alert("删除失败");
                return;
            }
        })
    }
    
}

const show=()=>{
    axios({
        url:'http://localhost:5017/api/User/Shosw',
        method:"get",
        params:info
    })
    .then(res=>{
        console.log(res);
        Object.assign(data,res.data);
    })
}


</script>

<style scoped>

</style>